<script setup lang="ts" name="SvgIcon">
import svgIcons from "@/assets/icons/index"
const dom = document.getElementById("__svg__icons__dom__").childNodes
console.log(dom[0])
const alinks = ref([
  {
    label: "字节图标库-IconPark",
    url: "https://iconpark.oceanengine.com/official"
  },
  {
    label: "阿里巴巴图标库-Iconfot",
    url: "https://www.iconfont.cn/search/index"
  }
])
</script>
<template>
  <ul class="svg-list">
    <li v-for="icon in svgIcons" :key="icon.id" class="svg-item">
      <svg-icon :icon-class="icon.icon" class-name="svg"></svg-icon>
      <div class="svg-name">{{ icon.icon }}</div>
    </li>
  </ul>
  <div>
    <p class="more">
      <span>更多图标可自行设计或前往下列图标库下载</span>
    </p>
    <a
      v-for="(item, index) in alinks"
      :key="index"
      target="_blank"
      :href="item.url"
      class="friendlink"
    >
      {{ item.label }}
    </a>
  </div>
</template>
<style lang="scss" scoped>
.svg-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  .svg-item {
    width: 120px;
    height: 100px;
    margin: 10px 20px;
    cursor: pointer;
    .svg {
      width: 60px;
      height: 60px;
    }
  }
}
.more {
  text-align: center;
}
</style>
